<template>
  <div>
    <!-- 面包屑 -->
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >车间模拟</el-breadcrumb-item>
        <el-breadcrumb-item >设备类型</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="equiptype-content-div">
      <div style="display: flex;justify-content: space-between;">
        <!-- 设备类型列表 -->

        <div style="width: 400px;">
          <div class="equiptype-content-left">
            <div>
              <span>设备类型列表:</span>
               <el-link type="primary" :underline="false" @click="addEquipTypelistVisble">
                 <i class="iconfont icon-jiahao"></i>
                 新增
               </el-link>
            </div>


            <!-- 设备类型 -->
            <vxe-table
              border
              resizable
              highlight-hover-row
              highlight-current-row
              main-height="300"
              max-height="800"
              :data="equipTypeTableData">
              <vxe-table-column field="equipmentId" title="设备型号" show-overflow></vxe-table-column>
              <vxe-table-column field="equipmentName" title="设备名称" show-overflow></vxe-table-column>
              <vxe-table-column field="description" title="描述" show-overflow></vxe-table-column>
              <vxe-table-column title="操作" width="110" show-overflow>
                <template v-slot="{ row }">
                  <el-button type="text" size="small" @click="lookInfo(row)">查看</el-button>
                  <el-button type="text" size="small" @click="equipTypeEditor(row)" >编辑</el-button>
                  <el-button type="text" size="small" @click="eEquipmentypeDelete(row)">删除</el-button>
                </template>
              </vxe-table-column>
            </vxe-table>
          </div>
        </div>



        <!-- 多功能提取罐 -->
        <div
          style="flex: 1;"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          v-show="show">
          <div class="equiptype-content-right">
            <span class="equiptype-content-right-span">{{this.equipType.equipmentName}}</span>

            <div style="display: flex;justify-content: space-around;padding: 10px;">
              <div style="display: flex;flex-direction: column;width: 250px;border: 1px solid #DCDFE6;border-radius: 7px;margin-right: 10px;">
                <div class="first-child">
                  <span>名称：{{this.equipType.equipmentName}}</span>
                  <span>型号：{{this.equipType.equipmentId}}</span>
                  <span>采集频率：{{this.equipType.acquisitionFrequency}}</span>
                  <span>模拟脚本：a.py</span>
                </div>
                <img :src="this.equipType.equipmentPic" style="margin: 10px;height: 200px;border: 1px solid #DCDFE6;"/>
              </div>

              <div style="margin: 0 auto;flex: 1;">
                <span style="margin: 10px;display: block;">操作键</span>
                <vxe-table
                  border
                  resizable
                  keep-source
                  show-overflow
                  highlight-hover-row
                  highlight-current-row
                  ref="OperatTable"
                  height="300"
                  :loading="Operatloading"
                  :edit-config="{trigger: 'manual', mode: 'row'}"
                  :data="equipOperationData">
                  <vxe-table-column field="operId" title="id" show-overflow ></vxe-table-column>
                  <vxe-table-column field="operName" title="名称" show-overflow></vxe-table-column>
                  <vxe-table-column field="operScript" title="事件(脚本动作)" show-overflow :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
                  <vxe-table-column title="操作" width="80" show-overflow>
                    <template v-slot="{ row }">

                      <template v-if="$refs.OperatTable.isActiveByRow(row)">
                        <el-button type="text" size="small" @click="saveOperat(row)">保存</el-button>
                        <el-button type="text" size="small" @click="cancelOperateRowEvent(row)">取消</el-button>
<!--                        <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
                        <vxe-button @click="cancelRowEvent(row)">取消</vxe-button> -->
                      </template>
                      <template v-else>
                        <el-button type="text" size="small"  @click="editOperatRowEvent(row)">编辑</el-button>
                        <el-button type="text" size="small" @click="eEquipmentOperatsDelete(row)">删除</el-button>
                      </template>
                    </template>
                  </vxe-table-column>
                </vxe-table>


                <span style="margin: 10px;display: block;">传感器列表</span>
                <vxe-table
                  border
                  resizable
                  highlight-hover-row
                  height="300"
                  highlight-current-row
                  :data="equipSensorData">
                  <vxe-table-column field="sensorTag" title="位号" show-overflow></vxe-table-column>
                  <vxe-table-column field="sensorName" title="名称" show-overflow></vxe-table-column>
                  <vxe-table-column field="sensorUnit" title="单位" show-overflow></vxe-table-column>
                  <vxe-table-column field="sensorMax" title="最大值" show-overflow></vxe-table-column>
                  <vxe-table-column field="sensorMin" title="最小值" show-overflow></vxe-table-column>
                  <vxe-table-column field="alarmThreshold" title="告警阈值" show-overflow></vxe-table-column>
                </vxe-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- 添加设备类型列表 -->
    <el-dialog
      title="添加设备类型"
      :visible.sync="equipAddVisible"
      :close-on-click-modal="false"
      width="1000px">
      <div>
        <equiptype-addform v-on:equipAddVisible="cancle"></equiptype-addform>
      </div>
    </el-dialog>

  <!-- 编辑设备类型列表 -->
    <el-dialog
      title="编辑设备类型"
      :visible.sync="equipEditorVisible"
      :close-on-click-modal="false"
      width="1000px">
      <div>
        <equiptype-editorform v-on:equipEditorVisible="Editorcancle" :TypeInfo="this.TypeInfo" :OperatsList="this.OperatsList" :SensorList="this.SensorList" ></equiptype-editorform>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import EquiptypeAddform from './equipTypeAddForm'
  import EquiptypeEditorform from './equipTypeEditorForm'
  import EquipTypeApi from '@/api/equipType'
  export default {
    data() {
      return {
        // 设备类型数据
        equipTypeTableData: [],
        // 设备操作键数据
        equipOperationData:[],
        // 设备传感器列表
        equipSensorData:[],
        // 操作键加载
        Operatloading:false,
        // 单个设备类型数据
        equipType:{

        },
        show:false,
        // 设备类型分页
        equipTypePageInfo:{
          // pageNo:1,
          pageSize:100,
          currentPage: 1,
          count:0
        },
        // 传感器分页
        equipSensorPageInfo:{
          // pageNo:1,
          pageSize:100,
          currentPage: 1,
          count:0
        },
        // 设备操作键分页
        equipOperatPageInfo:{
          // pageNo:1,
          pageSize:100,
          currentPage: 1,
          count:0
        },

        // 设备信息的展示
        show:false,
        // 涉笔添加弹窗
        equipAddVisible:false,
        // 设备编辑弹窗
        equipEditorVisible:false,

        // 设备编辑
        TypeInfo:{},
        OperatsList:[],
        SensorList:[],

        loading:false
      }
    },
    components:{
      EquiptypeAddform,
      EquiptypeEditorform
    },
    methods:{
      // 添加设备类型列表
      addEquipTypelistVisble(){
        this.equipAddVisible = true
      },
      // 查看设备类型 获取操作键 传感器列表
      lookInfo(row){
        this.loading = true
        // 设备类型赋值
        this.equipType = row

        // 获取操作键list
        EquipTypeApi.eEquipmentOperats(this.equipOperatPageInfo,row.equipmentId).then(res => {
          if(res.data.status === "200"){
            this.equipOperationData = res.data.data.records
          }
        })
        // 获取传感器list
        EquipTypeApi.eEquipmentSensorList(this.equipSensorPageInfo,row.equipmentId).then(res => {
          if(res.data.status === "200"){
            this.equipSensorData = res.data.data.records
            this.loading = false
          }
        })

        this.show = true
      },
      // 删除设备类型
      eEquipmentypeDelete(row){
        this.$XModal.confirm('您确定要删除吗？').then(type => {
          if(type === "confirm"){
            EquipTypeApi.eEquipmentypeDelete(row.equipmentId).then(res => {
              if(res.data.status === "200"){
                // 重新获取数据
                this.getEquipTypeList()
              }
            })
          }
        })
      },
      // 获取设备类型
      getEquipTypeList(){
        EquipTypeApi.eEquipmentypeList(this.equipTypePageInfo).then(res => {
          if(res.data.status === "200"){
            this.equipTypeTableData = res.data.data.records
          }
        })
      },
      // 设备操作间删除
      eEquipmentOperatsDelete(row){
        this.$XModal.confirm('您确定要删除吗？').then(type => {
          if(type === "confirm"){
            // 请求
            EquipTypeApi.eEquipmentOperatsDelete(row.equipmentId,row.operId).then(res => {
              if(res.data.status === "200"){
                // 重新获取操作键list
                EquipTypeApi.eEquipmentOperats(this.equipOperatPageInfo,row.equipmentId).then(res => {
                  if(res.data.status === "200"){
                    this.equipOperationData = res.data.data.records
                  }
                })
              }
            })
          }
        })
      },
      // 操作操作键row活跃
      editOperatRowEvent(row){
        this.$refs.OperatTable.setActiveRow(row)
      },
      // 还原操作键数据
      cancelOperateRowEvent (row) {
        var OperatTable = this.$refs.OperatTable
        OperatTable.clearActived().then(() => {
          // 还原行数据
          OperatTable.revertData(row)
        })
      },
      // 保存操作键数据
      saveOperat(row){
        this.$refs.OperatTable.clearActived().then(() => {
          this.Operatloading = true
          EquipTypeApi.eEquipmentOperatsUpdate(row.equipmentId,row.operId,row.operScript).then(res => {
            if(res.data.status === "200"){
              // 重新获取操作键list
              EquipTypeApi.eEquipmentOperats(this.equipOperatPageInfo,row.equipmentId).then(res => {
                if(res.data.status === "200"){
                  this.equipOperationData = res.data.data.records
                  this.Operatloading = false
                }
              })
            }
          })
        })
      },
      // 取消
      cancle(bool,isSubmit){
        /* 数据提交了*/
        if(isSubmit){
          this.getEquipTypeList()
        }
        this.equipAddVisible = bool
      },
      Editorcancle(bool,isSubmit){
        /* 数据提交了*/
        if(isSubmit){
          this.getEquipTypeList()
        }
        this.equipEditorVisible = bool
      },
      // 编辑equipType
      // 需要获取到 对应的数据才行(操作间，传感器列表)
      equipTypeEditor(row){
        // this.TypeInfo["equipType"] = row
        this.TypeInfo= row

        // 获取操作键list
        EquipTypeApi.eEquipmentOperats(this.equipOperatPageInfo,row.equipmentId).then(res => {
          if(res.data.status === "200"){
            this.OperatsList = res.data.data.records
          }
        })
        // 获取传感器list
        EquipTypeApi.eEquipmentSensorList(this.equipSensorPageInfo,row.equipmentId).then(res => {
          if(res.data.status === "200"){
           this.SensorList = res.data.data.records
          }
        })
        this.equipEditorVisible = true
      }
    },
    created() {
      this.getEquipTypeList()
    }
  }
</script>

<style scoped="scoped">
  .equiptype-content-div{
    background-color: #FFFFFF;
    /* width: 100%; */
    border-radius: 5px;
    /* margin: 0px 20px 20px 0px; */
    /* width: 85%;margin: 0 auto; */
  }
  .equiptype-content-left{
    display: flex;
    flex-direction: column;
    /* height: 550px; */
    border: 1px solid #DCDFE6;
    margin: 20px 10px;
  }
  .equiptype-content-left div:nth-child(1){
    height: 40px;
    color: rgb(88, 88, 88);
    line-height:40px;
    padding: 0 20px;
    background-color: #f5f5f5;
    box-shadow: 1px 1px 4px #909399;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .equiptype-content-right{
    border: 1px solid #DCDFE6;
    margin: 20px 10px;
  }
  .equiptype-content-right-span{
    height: 40px;
    color: rgb(88, 88, 88);
    line-height:40px;
    background-color: #f5f5f5;
    box-shadow: 1px 1px 4px #909399;
    display: block;
    padding-left: 20px;
  }
  .first-child{
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin-top: 20px;
  }
  .first-child span{
    margin: 10px;
    color: rgb(101, 101, 101);
    font-size: 15px;
  }
</style>
